<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="taiji">
		</div>
	</body>
	<style>
		body{
			background:rgba(128,128,128,.2);
		}
		#taiji{
			margin: 50px auto;
			width: 600px;
			height: 600px;
			animation: rotate 3s linear infinite;
			animation-play-state: paused;
		}
		.taiji{
			width: 300px;
			height: 300px;
			border-radius: 50%;
			position: relative;
			margin: 200px auto;
			top:150px;
			background-image: linear-gradient(to right,black 50%, white 50%);
		}
		.taiji::before,.taiji::after{
			content: '';
			position: absolute;
			width: 30px;
			height: 30px;
			border-radius:50%;
			left:50%;
			transform: translateX(-50%);
		}
		.taiji::before{
			background-color: white;
			border: 60px solid black;
			top: 0;
		}
		.taiji::after{
			background-color: black;
			border: 60px solid white;
			bottom: 0;
		}
		.line{
			width: inherit;
			height: inherit;
			transform-origin:50% 50%;
			transition: all 0s;
			position: absolute;
		}
		.line1{
			height: 10px;
			width: 80px;
			background-color: #000000;
			margin: 10px auto;
		}
		.line2{
			display: flex;
			width: 80px;
			margin: 10px auto;
		}
		.line3,.line4{
			height: 10px;
			width: 35px;
			background-color: #000000;
		}
		.line4{
			margin-left: 10px;
		}
		@keyframes rotate{
			0%{
				transform: rotate(0deg);
			}
			100%{
				transform: rotate(360deg);
			}
		}
		#taiji:hover{
			animation-play-state: running;
		}
	</style>
	<script>
		var m = document.getElementById('taiji'),
			lineLists = ",2,02,12,012,01,1,0";
		lineLists = lineLists.split(',');
		//四周的黑线
		for(let i = 0; i < 8; i++){
			var	newNode = document.createElement("div");
			newNode.classList.add("line");
			for(let j = 0; j < 3; j++){
				let child = document.createElement("div");
				if(lineLists[i].indexOf(j) != -1){
					let c1 = document.createElement("div"),
						c2 = document.createElement("div");
					child.classList.add("line2");
					c1.classList.add("line3");
					c2.classList.add("line4");
					child.appendChild(c1);
					child.appendChild(c2);
				}else{
					child.classList.add("line1");
				}
				newNode.appendChild(child);
			}
			newNode.style.transform = `rotate(${i*45}deg)`;
			m.appendChild(newNode);
		}
		//太极图中间部分
		var	newNode = document.createElement("div");
		newNode.classList.add("taiji");
		m.appendChild(newNode);
		console.log(m);
	</script>
</html>
